<template>
  <div class="appBox">
    <router-view v-slot="{ Component }">
      <transition name="move" mode="out-in">
        <keep-alive :include="includes">
          <component :is="Component" />
        </keep-alive>
      </transition>
    </router-view>
  </div>
</template>

<script setup lang="ts">
const router = useRouter();
const includes = ref<string[]>([]);
router.getRoutes().map((item) => {
  if (item.meta.keepAlive && item.name) includes.value.push(item.name as string);
});
(function (doc, win) {
  const resizeEvent = "orientationchange" in window ? "orientationchange" : "resize";
  var recalCulate = function () {
    var docEle = document.documentElement || document.body,
      w = docEle.clientWidth,
      num = (w > 750 ? 750 : w) / 750;
    docEle.style.fontSize = (num * 100).toFixed(1) + "px";
  };
  recalCulate();
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvent, recalCulate, false);
})(document, window);
</script>

<style lang="scss">
.appBox {
  height: 100vh;
  overflow: hidden;
  position: relative;
}
</style>
